<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MARRIAGE</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<style>
    .el-header, .el-footer {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 800px;
        padding-top: 50px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>


<body>

<div id="app">
    <el-container>
        <el-header style="background-color: #111111;color: white;position: relative;">
            <a th:href="@{/users/toIndex}" style="color: white;text-decoration: none;position: absolute;left: 20px;"><i class="el-icon-arrow-left"></i>返回</a>
            个人中心
        </el-header>
        <el-header>
            <el-button @click="removeUser()" type="danger" icon="el-icon-delete" style="float: right;margin-left:5px;margin-top: 10px">注销账号</el-button>
            <el-button @click="backLogin()" type="primary" icon="el-icon-switch-button"  style="float: right;margin-left:5px;margin-top: 10px">退出登录</el-button>
            <el-button @click="dialogFormVisible = true" type="primary" icon="el-icon-edit"  style="float: right;margin-left:5px;margin-top: 10px">修改密码</el-button>
        </el-header>
        <el-container>
            <el-aside width="250px">
            </el-aside>
            <el-main text-align="center">
                <el-form ref="form" :model="userInfo" label-width="120px">
                    <el-form-item label="基础信息">
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="userInfo.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="userInfo.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="userInfo.userSex == '1' ? '男':'女'" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-date-picker
                                v-model="userInfo.userBirthday"
                                type="date"
                                placeholder="出生日期"
                                :picker-options="pickerOptions"
                                @blur="birthday()">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="userInfo.userAge" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="星座">
                        <el-input v-model="userInfo.userConstellation" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="学历">
                        <el-select v-model="userInfo.userEducation" placeholder="请选择学历">
                            <el-option label="博士" value="博士"></el-option>
                            <el-option label="研究生" value="研究生"></el-option>
                            <el-option label="本科" value="本科"></el-option>
                            <el-option label="大专" value="大专"></el-option>
                            <el-option label="中专" value="中专"></el-option>
                            <el-option label="高中" value="高中"></el-option>
                            <el-option label="初中" value="初中"></el-option>
                            <el-option label="小学" value="小学"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作">
                        <el-input v-model="userInfo.userJob"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input v-model="userInfo.userPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="userInfo.userMail"></el-input>
                    </el-form-item>
                    <el-form-item label="工资(单位：元)">
                        <el-input v-model="userInfo.userSalary"></el-input>
                    </el-form-item>
                    <el-form-item label="婚姻状态">
                        <el-select v-model="userInfo.userMaritalStatus" placeholder="婚姻状态">
                            <el-option label="未婚" value="未婚"></el-option>
                            <el-option label="已婚" value="已婚"></el-option>
                            <el-option label="离异" value="离异"></el-option>
                            <el-option label="丧偶" value="丧偶"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身高(单位CM)">
                        <el-input v-model="userInfo.userHeight"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="userInfo.userAddress"></el-input>
                    </el-form-item>

                    <el-form-item label="密保问题">
                    </el-form-item>

                    <el-form-item label="喜欢的数字">
                        <el-input v-model="userInfo.userProblem1" placeholder="100以内"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的诗人">
                        <el-input v-model="userInfo.userProblem2"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的菜">
                        <el-input v-model="userInfo.userProblem3"></el-input>
                    </el-form-item>

                    <el-form-item label="爱好">
                    </el-form-item>

                    <el-form-item label="喜欢的菜">
                        <el-input v-model="hobby.hobbyDish" placeholder="100以内"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的歌">
                        <el-input v-model="hobby.hobbySong"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的书">
                        <el-input v-model="hobby.hobbyBook"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的运动">
                        <el-input v-model="hobby.hobbySports"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的一句话">
                        <el-input v-model="hobby.hobbyFamousQuote"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="chongzhi()">重置</el-button>
                    </el-form-item>
                </el-form>

            </el-main>
            <el-aside width="250px">
            </el-aside>
        </el-container>
        <el-footer style="background-color:#202329 ;color: white;"><!--系统公司信息-->
            <p style="margin-bottom: 20px" >© 2022 Match Marriage All rights reserved | Design by
                <a href="https://blog.csdn.net/qq_45839699?type=sub&subType=watch" style="color: white"> ZJ.</a>
            </p>
        </el-footer>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="原密码" >
                <el-input @blur="checkPassword()" type="password" v-model="form.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" >
                <el-input type="password"  v-model="form.new" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" >
                <el-input type="password" v-model="form.repeat" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align: center;color: #ff0814">
            <span id="tis"></span>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updatePassword()">确 定</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script>
    var userId=[[${session.userInfo.userId}]]
    new Vue({
        el: "#app",
        data(){
            return {
                userInfo:[],
                hobby:[],
                dialogFormVisible: false,
                form:[],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        mounted(){
            var _this=this
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"findUserByUserIdToUserInfo",
                data:userId
            }).then(function(response) {
                _this.userInfo = response.data;
                _this.userInfo.userBirthday=timestampToTime(response.data.userBirthday);

            });
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/friends/findHobbyByUserId",
                data:userId
            }).then(function(response) {
                _this.hobby = response.data;
            });

        },
        methods: {
            backLogin(){
                var _this = this;
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.href = 'toLogin';
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            chongzhi(){
                location.reload();
            },
            onSubmit() {
                var _this=this;
                var date= timestampToTime(this.userInfo.userBirthday);
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"setDate",
                    data:date
                }).then(function(response) {
                });
                _this.userInfo.userBirthday=null;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"updateUserById",
                    data:this.userInfo
                }).then(function(response) {
                });
                _this.hobby.hobbyUser=userId;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"/friends/updateHobby",
                    data:this.hobby
                }).then(function(response) {
                });
                location.reload();
            },
            removeUser(){
                var _this = this;
                this.$confirm('此操作将永久注销此账户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        headers:{'Content-Type':'application/json;charset=utf8'},
                        method:"post",
                        url:"removeUser",
                        data:userId
                    }).then(function(response) {
                        if(response.data=="1"){
                            window.location.href="toLogin"
                        }else{
                            window.location.href="toErrorPage"
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            checkPassword() {
                var _this = this;
                if(this.form.pwd == _this.userInfo.loginPassword){
                }else{
                    this.$alert('原密码错误！',  {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'danger',
                                message: '请重新输入密码！'
                            });
                        }
                    });
                }
            },
            updatePassword(){
                var _this = this;
                if(this.form.pwd == _this.userInfo.loginPassword){
                    if(this.form.new==this.form.repeat){
                        var params = new URLSearchParams()
                        params.append("loginPassword",this.form.new);
                        axios({
                            url:"updateUserPasswordById",
                            method:"post",
                            data:params
                        }).then(function (response) {
                            if(response.data=="1"){
                                _this.dialogFormVisible = false;
                            }else{
                                window.location.href="toErrorPage"
                            }
                        })
                    }else {
                        this.$alert('两次密码不一样！',  {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'danger',
                                    message: '请重新输入密码！'
                                });
                            }
                        });
                    }
                }else{
                    this.$alert('原密码错误！',  {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'danger',
                                message: '请重新输入密码！'
                            });
                        }
                    });
                }

            },
            birthday(){
                var _this = this;
                var birthday=timestampToTime(this.userInfo.userBirthday);

                let birthdays = new Date(birthday.replace(/-/g, "/"));
                let d = new Date();
                let age =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                _this.userInfo.userAge=age;
                var month = birthdays.getMonth()+1;
                var date = birthdays.getDate();
                var con = getxingzuo(birthdays.getMonth() + 1, birthdays.getDate());
                _this.userInfo.userConstellation = con;
            },


        }

    })
    function timestampToTime(timestamp) {
        var date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
        return Y+M+D;
    };

    function getxingzuo(month, day) {

        var d = new Date(1999, month - 1, day, 0, 0, 0);

        var arr = [];

        arr.push(["魔羯座", new Date(1999, 0, 1, 0, 0, 0)])

        arr.push(["水瓶座", new Date(1999, 0, 21, 0, 0, 0)])

        arr.push(["双鱼座", new Date(1999, 1, 20, 0, 0, 0)])

        arr.push(["白羊座", new Date(1999, 2, 21, 0, 0, 0)])

        arr.push(["金牛座", new Date(1999, 3, 21, 0, 0, 0)])

        arr.push(["双子座", new Date(1999, 4, 22, 0, 0, 0)])

        arr.push(["巨蟹座", new Date(1999, 5, 22, 0, 0, 0)])

        arr.push(["狮子座", new Date(1999, 6, 23, 0, 0, 0)])

        arr.push(["处女座", new Date(1999, 7, 24, 0, 0, 0)])

        arr.push(["天秤座", new Date(1999, 8, 24, 0, 0, 0)])

        arr.push(["天蝎座", new Date(1999, 9, 24, 0, 0, 0)])

        arr.push(["射手座", new Date(1999, 10, 23, 0, 0, 0)])

        arr.push(["魔羯座", new Date(1999, 11, 22, 0, 0, 0)])

        for (var i = arr.length - 1; i >= 0; i--) {

            if (d >= arr[i][1]) return arr[i][0];

        }

    }
</script>
</html>
